<template>
  <div>
    <a-modal
      title="成品出库"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">成品名称</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiForm.endProductName"
              placeholder="成品名称"
              allow-clear
              disabled
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">出库数量</a-col>
          <a-col :span="20">
            <a-input-number
              placeholder="出库数量"
              v-model:value="apiForm.endProductNum"
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">出库仓库</a-col>
          <a-col :span="20">
            <a-radio-group
              name="radioGroup"
              :default-value="1"
              v-model:value="apiForm.storehouseId"
            >
              <a-radio
                :value="item.id"
                v-for="(item, index) in storehouseList"
                :key="index"
              >
                {{ item.srName }}
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { storehouseAll } from '@/api/storeroom'
import { produceEndProduct } from '@/api/endProduct'
export default {
  data() {
    return {
      apiForm: {
        endProductName: '',
        endProductId: '',
        storehouseId: '',
        endProductNum: 1,
      },
      confirmLoading: false,
      visible: false,
      // 仓库列表
      storehouseList: [],
    }
  },
  created() {
    this.storehouse()
  },
  methods: {
    handleCancel(e) {
      this.visible = false
    },
    /**
     * 进货
     */
    handleOk() {
      this.confirmLoading = true
      if (this.apiForm.storehouseId === '') {
        this.$message.error('请选择仓库')
        return
      }
      produceEndProduct(this.apiForm).then((res) => {
        this.clearAll()
        this.$parent.getProductList()
        this.$message.success('出库成功')
      }).catch(error => {
        this.clearAll()
      })
    },
    /**
     * 根据权限 获取仓库
     */
    storehouse() {
      storehouseAll().then((res) => {
        this.storehouseList = res.queryResult.list
      })
    },
    clearAll() {
      this.confirmLoading = false
      this.apiForm = Object.assign({
        endProductName: '',
        endProductId: '',
        storehouseId: '',
        endProductNum: 1,
      })
      this.visible = false
    },
  },
}
</script>